<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/public.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <title>DeepDR</title>

  <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
  <script src="http://cdn.bootcss.com/angular.js/1.6.1/angular-route.min.js" type="text/javascript"></script>
  <script src="js/ng-file-upload/ng-file-upload-all.min.js" type="text/javascript"></script>
  <script src="http://cdn.bootcss.com/bootstrap-select/1.12.1/js/bootstrap-select.min.js"
          type="text/javascript"></script>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
  <link href="http://cdn.bootcss.com/bootstrap-select/1.12.1/css/bootstrap-select.min.css" rel="stylesheet"
        media="screen">
  <script src="http://cdn.bootcss.com/angular-smart-table/2.1.8/smart-table.min.js" type="text/javascript"></script>

  <script type="application/javascript" src="bower_components/angularPrint/angularPrint.js"></script>

  <script src="js/index.js" type="text/javascript"></script>
  <link href="css/them.css" rel="stylesheet">

</head>
<body ng-app="deepDRapp">
<div ng-controller="appController" data-ng-init="init()">
  <div ng-show='menuItem != "login"'>
    <div class="header" ng-show="menuItem!='report'">
      <div class="header_con">
        <div class="fl nav">
          <ul>
            <li><a class="dd" ng-click='set_menu_item("index")'>Home</a></li>
            <li><a ng-click='set_menu_item("start")'>Start Diagnose</a></li>
            <li><a ng-click='set_menu_item("list", renew);'>Diagnose List</a></li>
            <!-- <li><a ng-click='set_menu_item("marker")'>DeepMarker</a></li> -->
          </ul>
        </div>
        <div class="nav fl" ng-show="!LogedIn">
          <ul>
            <li><a><input class="form-control mr-sm-1" type="text" placeholder="User Name"
                          ng-model="usrname">
            </a></li>
            <li><a><input class="form-control mr-sm-1" type="password" placeholder="Password"
                          ng-model="psw">
            </a></li>
            <li><a class="btn btn-outline-success" type="button" ng-click='login()'>Login</a></li>
          </ul>
        </div>
        <div class="nav fl" ng-show="LogedIn">
          <ul>
            <li><a class="disabled" href="#">{{title}}</a></li>
            <li><a class="disabled" ng-click="exit_login()">Logout</a></li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div id="indexflash" ng-show='menuItem == "index"'>
      <div class="slides">
        <div class="slideInner">
				<span style="background:url(img/banner01.jpg) no-repeat center;">
					<div class="moveElem img1 fs65 white" rel="0,easeInOutExpo">我们利用深度学习技术</div>
					<div class="moveElem img2 fs30 white" rel="150,easeInOutExpo">进行全自动的微血管瘤、出血、渗出、血管异常检测</div>
					<div class="moveElem img3 fs30 white" rel="300,easeInOutExpo">定量计算病变面积、病变数量</div>
					<div class="moveElem img4 fs30 white" rel="600,easeInOutExpo">快速、客观的诊断结果</div>
				</span>
          <span style="background:url(img/banner02.jpg) no-repeat center;">
					<div class="moveElem img1 fs65 white" rel="0,easeInOutExpo">主动学习技术</div>
					<div class="moveElem img2 fs30 white" rel="150,easeInOutExpo">医生发现系统诊断错误时可以将错误反馈回系统</div>
					<div class="moveElem img3 fs30 white" rel="300,easeInOutExpo">系统将自动纠正模型中的问题，得到更好的效果</div>
				</span>
          <span style="background:url(img/banner03.jpg) no-repeat center;">
					<div class="moveElem img1 fs65 white" rel="0,easeInOutExpo">数据处理与挖据技术</div>
					<div class="moveElem img2 fs30 white" rel="150,easeInOutExpo">方便病变的统计、检索，便于数据的再次利用</div>
				</span>
        </div>
      </div>
      <!-- <script src="js/jquery-1.11.3.min.js"></script> -->
      <script src="js/slide.js"></script>
      <script>
          $(document).ready(function () {
              $(".slideInner").slide({
                  slideContainer: $('.slideInner span'),
                  effect: 'easeOutCirc',
                  autoRunTime: 2000,
                  slideSpeed: 1000,
                  nav: true,
                  autoRun: true,
                  prevBtn: $('span.prev'),
                  nextBtn: $('span.next')
              })
          })
      </script>
    </div>
    <div ng-show='menuItem != "index" && menuItem != "report"'>
			<span style="background:url(img/banner01.jpg) no-repeat center;">
				<img src="img/banner01.jpg" height="80" , width="100%"/>
			</span>
    </div>
    <div ng-show='menuItem == "index"'>
      <div class="tnb">
        <div class="tnb_n pr">
          <div class="zywt_tit">
            <span class="db fk fl"></span>
            <span class="fl db fs36 zywt_tit_con">糖尿病眼底病变（DR）</span>
            <div class="clear"></div>
          </div>
          <div class="ml176 mt50"><img src="img/tu-11.jpg"/></div>
          <div class="tnb_con pa lh36 fs18 white">
            简单的说就是糖尿病造成的眼底病变。<br/>
            糖尿病破换血管等人体组织，包括眼底血管，造成了眼底病变<br/>
            工作人群致盲率最高的疾病<br/>
            中国糖尿病患者约1亿（全球患者约3.7亿）。<br/>
            目前DR发病率37%，且在10年内上升至54%。<br/>
            3500万DR患者需要没半年、几个月定期到医院检查<br/>
            平均每天有19万患者接受眼底检查<br/>
            所以需要自动诊断系统。
          </div>
        </div>
      </div>
      <div class="zywt">
        <div class="zywt_con">
          <div class="zywt_tit">
            <span class="db fk fl"></span>
            <span class="fl db fs36 zywt_tit_con">眼底读片的主要问题</span>
            <div class="clear"></div>
          </div>
          <div class="zywt_con_n ml80 mt100 fl">
            <div class="zywt_n">
              <div class="zywt_n_tit fs24 white fwb pl10">工作负荷重</div>
              <div class="fs18 mt5 pl10 lh30">随着糖尿病预防和诊治服务体系建设项目的推进，眼底读片数量大大增加</div>
            </div>
            <div class="zywt_n mt30">
              <div class="zywt_n_tit fs24 white fwb pl10">诊断结果不客观</div>
              <div class="fs18 mt5 pl10 lh30">眼底读片需要长期的专业培训，不同医生读片结果往往存在差异</div>
            </div>
            <div class="zywt_n mt30">
              <div class="zywt_n_tit fs24 white fwb pl10">数据处理难度大</div>
              <div class="fs18 mt5 pl10 lh30">数据简单存档保存，数据整理工作量大，读片数据再次利用难度大</div>
            </div>
          </div>
          <div class="fl ml110 mt15"><img src="img/tu-1.jpg"/></div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="jishu">
        <div class="jishu_con">
          <div class="jishu_con_n pr fl mt43 ml60">
            <img src="img/tu-2.jpg"/>
            <div class="jishu_con_tit pa fs18 fwb white lh45 pl10">深度学习技术</div>
            <div class="fs16 jishu_n lh30">进行全自动的微血管瘤、出血、渗出、血管异常检测<br/>定量计算病变面积、病变数量<br/>快速、客观的诊断结果</div>
          </div>
          <div class="jishu_con_n pr fl mt43 ml65">
            <img src="img/tu-3.jpg"/>
            <div class="jishu_con_tit pa fs18 fwb white lh45 pl10">主动学习技术</div>
            <div class="fs16 jishu_n lh30">医生发现系统诊断错误时可以将错误反馈回系统<br/>系统将自动纠正模型中的问题，得到更好的效果</div>
          </div>
          <div class="jishu_con_n pr fl mt43 ml65">
            <img src="img/tu-4.jpg"/>
            <div class="jishu_con_tit pa fs18 fwb white lh45 pl10">数据处理与挖据技术</div>
            <div class="fs16 jishu_n lh30">方便病变的统计、检索，便于数据的再次利用</div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="zdbgsc">
        <div class="zdbg pr">
          <div class="zywt_tit">
            <span class="db fk fl"></span>
            <span class="fl db fs36 zywt_tit_con">诊断报告生成</span>
            <div class="clear"></div>
          </div>
          <div class="zdbg_tu ml305 mt33"><img src="img/tu-5.jpg"/></div>
          <div class="zdbg_n ml80 mt100 pa">
            <ul class="fs18 fwb">
              <li>自动诊断系统能够自动生成诊断报告，避免人工写诊断报告的费时、繁琐</li>
              <li>诊断报告中包含更多定量诊断数据，方便医生进行判断</li>
              <li>相比定性的诊断报告在医学上有更高的价值</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="xtys">
        <div class="xtys_n pr">
          <div class="zywt_tit">
            <span class="db fk fl"></span>
            <span class="fl db fs36 zywt_tit_con">系统优势</span>
            <div class="clear"></div>
          </div>
          <div class="mt35"><img src="img/tu-6.jpg"/></div>
          <div class="xtys_con pa">
            <ul class="fs18 fwb white">
              <li>DeepDR自动诊断系统可以极大的方便医生的诊断</li>
              <li>系统的诊断结果有较高的准确性</li>
              <li>可以得到定量的诊断数据，便于今后的研究</li>
              <li>利用深度学习技术，增强学习技术，能够在医生反馈下自我修正</li>
              <li>拥有数据检索、挖据等功能，便于收集、分析各个社区得到是数据</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container theme-showcase" ng-controller="newImage">
      <div ng-show='menuItem == "start"'>

        <h3>Add New Pictures</h3>
        <p class="help">Please input patient information and click start to start the automatic diagnose.</p>
        <div class="panel panel-default text-center">
          <div class="panel-heading">Patient Information</div>
          <div class="panel-body">
            <form id="val_info">
              <div class="input-group">
                <span class="input-group-addon">Name</span>
                <input type="text" class="form-control" placeholder="Name" ng-model="patient.name">
                <span class="input-group-addon">Gender</span>
                <select class="selectpicker" ng-model="patient.gender">
                  <option value="male">male</option>
                  <option value="female">female</option>
                </select>
                <span class="input-group-addon">ID</span>
                <!-- <input type="text" class="form-control" placeholder="编号" ng-model="patient.id"> -->
                <input type="text" class="form-control" placeholder="ID">
                <span class="input-group-addon">Age</span>
                <input type="text" class="form-control" placeholder="Age" ng-model="patient.age">
                <span class="input-group-addon">Eye Sight</span>
                <input type="text" class="form-control" placeholder="1.0 / 1.0"
                       ng-model="patient.eye_sight">
              </div>
            </form>
          </div>
          <div class="panel panel-default text-center">
            <div class="panel-heading">Fundus Images</div>
            <div class="panel-body">
              <div class="row">

                <div class="col-sm-6 col-md-4" ng-repeat="pic in patient.pictures">
                  <div class="thumbnail">
                    <img ngf-thumbnail="pic.file || '/static/img/image-not-found.png'" class="thumb"
                         ngf-size="{width: 100%, quality: 0.9}" src="">
                    <div class="progress">
                      <div class="progress-bar" role="progressbar"
                           aria-valuemin="0" aria-valuemax="100"
                           style="width: {{pic.percentage}}%">
                        {{pic.finished?"upload finished":pic.percentage+"%"}}
                      </div>
                    </div>

                    <div class="caption">
                      <h5>{{pic.file.name}}</h5>
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default dropdown-toggle"
                                data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                          {{pic.which_eye == 'left' ? 'Left' : 'Right'}}
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a ng-click="pic.which_eye='left'">Left</a></li>
                          <li><a ng-click="pic.which_eye='right'">Right</a></li>
                        </ul>
                        <!--<button type="button" class="btn btn-default"-->
                        <!--ng-click="performUpload($index)">-->
                        <!--上传-->
                        <!--</button>-->
                        <button type="button" class="btn btn-default" ng-click="delPic($index)">
                          Delete
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div ngf-drop ngf-select ng-model="files" class="drop-box center"
                   ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
                   accept="image/*"
                   ngf-pattern="'image/*,application/pdf'">
                Please drag image files here to upload
              </div>
              <div ngf-no-file-drop>Your browser is not supported, please contact the developer.</div>
            </div>
          </div>

          <div class="btn-group" role="group">
            <a class="btn btn-default " ng-click="new_patient()"> Submit </a>
          </div>
        </div>
        <div class="panel panel-default" ng-show="submitted">
          <div class="panel-heading feature">
            <h4> Diagnose Result </h4>
            <div ng-show="diagnose_nready==true">Diagnose in processing, please wait ......</div>
          </div>
          <div class="panel-body">
            Patient information and grading result.
            <table st-table class="table table-striped">
              <thead>
              <tr>
                <th>Name</th>
                <th>Gender</th>
                <th>Age</th>
                <th>Eye sight</th>
                <th>Created date</th>
                <th>Grading result of the left eye</th>
                <th>Grading result of the right eye</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>{{patient.name}}</td>
                <td>{{gendermap[patient.gender]}}</td>
                <td>{{patient.age}}</td>
                <td>{{patient.eye_sight}}</td>
                <td>{{patient.created_date|date:"yyyy/MM/dd"}}</td>
                <td>{{patient.lgrade}}</td>
                <td>{{patient.rgrade}}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="btn btn-default"><a ng-click="get_report()">View Report</a></div>
      </div>

      <div>
        <div id="report_ele">
          <div class="larger-font" ng-show='menuItem == "report"'>
            <div class=" feature">
              <h4>{{title}}</h4>
              <h2> Fundus Image Report </h2>
              Patient information and grading result.
            </div>
            <table border="0" class="">
              <tr align="center">
                <td>name：{{patient.name}}</td>
                <td>gender：{{gendermap[patient.gender]}}</td>
                <td>Age：{{patient.age}}</td>
                <td>Eye Sight：{{patient.eye_sight}}</td>
                <td>Created Date：{{patient.created_date|date:"yyyy/MM/dd"}}</td>
              </tr>
              <tr ng-repeat="row in patient.pictures" align="center">
                <td colspan="5">
                  <img ng-src='{{row.url}}' style="width:70%; margin: 0 auto;">
                  <h4>{{row.which_eye=='left'? 'Left' : 'Right'}}Grading result：
                    {{row.result.level}}，{{degreemap[row.result.level]}}</h4>
                  <h4>Image quality assessment：{{row.result.quality>0.55?"Good quality":"Image quality not sufficient to grading."}}</h4>
                  <!-- <h4>{{row.result.positionDescp}}</h4> -->
                </td>
              </tr>
              <tr align="left">
                <td></td>
                <td colspan="4">
                  <h4>Fundus images:<br>
                    Right Eye: {{patient.rgrade<2?'No obvious sign of DR seen.':'Hemorrhages, exudates and microaneurysms can be seen in images.'}},
                    Left Eye: {{patient.lgrade<2?'No obvious sign of DR seen.':'Hemorrhages, exudated, and microaneurysms can be seen in images.'}}</h4>
                  <h4>Images: Right Eye:{{degreemap[patient.rgrade]}}, Left Eye:{{degreemap[patient.lgrade]}}</h4>
                  <h4>Suggestions：{{getSuggStr()}}</h4>
                </td>
              </tr>
            </table>
            <button class="btn" ng-click="print_report()" ng-show="showPrintBtn">Print Report</button>
            <button class="btn" ng-click="reset_content()" ng-show="showPrintBtn">Go Back</button>
          </div>
        </div>
      </div>
      <div class="container theme-showcase" ng-show='menuItem == "list"'>
        <div class="panel panel-default text-center">
          <div class="panel-heading">Report List</div>
          <div class="panel-body">
            <button class="btn" ng-click="renew()">Refresh</button>
            <table class="table table-striped">
              <tr>
                <th style="text-align: center">name</th>
                <th style="text-align: center">Gender</th>
                <th style="text-align: center">Age</th>
                <th style="text-align: center">Eye Sight</th>
                <th style="text-align: center">Created Date</th>
                <th style="text-align: center">Left/Right</th>
                <th style="text-align: center">Grading</th>
                <th style="text-align: center">Report</th>
              </tr>
              <tr ng-repeat="row in rowCollection">
                <td><a href="{{row.BinObj.url}}" target="_blank">{{row.patient.name}}</a></td>
                <td>{{row.patient.gender}}</td>
                <td>{{row.patient.age}}</td>
                <td>{{row.patient.eye_sight}}</td>
                <td>{{row.patient.created_date | date:"yyyy/MM/dd"}}</td>
                <td>{{row.PicMap.WhichEye=='left'?'left':'right'}}</td>
                <td>Degree:{{row.result.level}}，{{degreemap[row.result.level]}}</td>
                <td><a ng-click="review_report(row.patient.id)">check reports</a></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div ng-controller="deepmarker" class="container theme-showcase" role="main" ng-show='menuItem == "marker"'>
    <h3>Report list</h3>
    <div class="panel panel-default text-center">
      <div class="panel-heading">Diagnose list</div>
      <div class="panel-body">
        <table class="table table-striped">
          <tr>
            <th>数值类型</th>
            <th>值</th>
          </tr>
          <tr>
            <td>trt_code</td>
            <td><input ng-model='vals["trt_code"]'></td>
          </tr>
          <tr>
            <td>priorcvd</td>
            <td><input ng-model='vals["priorcvd"]'></td>
          </tr>
          <tr>
            <td>age</td>
            <td><input ng-model='vals["age"]'></td>
          </tr>
          <tr>
            <td>male</td>
            <td><input ng-model='vals["male"]'></td>
          </tr>
          <tr>
            <td>BMI</td>
            <td><input ng-model='vals["BMI"]'></td>
          </tr>
          <tr>
            <td>waist</td>
            <td><input ng-model='vals["waist"]'></td>
          </tr>
          <tr>
            <td>hip</td>
            <td><input ng-model='vals["hip"]'></td>
          </tr>
          <tr>
            <td>heart rate</td>
            <td><input ng-model='vals["heart rate"]'></td>
          </tr>
          <tr>
            <td>fasting plasma glucose</td>
            <td><input ng-model='vals["fasting plasma glucose"]'></td>
          </tr>
          <tr>
            <td>fasting insulin</td>
            <td><input ng-model='vals["fasting insulin"]'></td>
          </tr>
          <tr>
            <td>HbA1c</td>
            <td><input ng-model='vals["HbA1c"]'></td>
          </tr>
          <tr>
            <td>triglyceride</td>
            <td><input ng-model='vals["triglyceride"]'></td>
          </tr>
          <tr>
            <td>total cholesterol</td>
            <td><input ng-model='vals["total cholesterol"]'></td>
          </tr>
          <tr>
            <td>HDL-c</td>
            <td><input ng-model='vals["HDL-c"]'></td>
          </tr>
          <tr>
            <td>LDL-c</td>
            <td><input ng-model='vals["LDL-c"]'></td>
          </tr>
          <tr>
            <td>SBP</td>
            <td><input ng-model='vals["SBP"]'></td>
          </tr>
          <tr>
            <td>DBP</td>
            <td><input ng-model='vals["DBP"]'></td>
          </tr>
          <tr>
            <td>hsCRP</td>
            <td><input ng-model='vals["hsCRP"]'></td>
          </tr>
          <tr>
            <td>creatinine</td>
            <td><input ng-model='vals["creatinine"]'></td>
          </tr>
          <tr>
            <td>ever smoker</td>
            <td><input ng-model='vals["ever smoker"]'></td>
          </tr>
          <tr>
            <td>race</td>
            <td><input ng-model='vals["race"]'></td>
          </tr>
          <tr>
            <td>HTN treatment</td>
            <td><input ng-model='vals["HTN treatment"]'></td>
          </tr>
          <tr>
            <td>B_APO_A1</td>
            <td><input ng-model='vals["B_APO_A1"]'></td>
          </tr>
          <tr>
            <td>B_APO_A2</td>
            <td><input ng-model='vals["B_APO_A2"]'></td>
          </tr>
          <tr>
            <td>B_APO_B</td>
            <td><input ng-model='vals["B_APO_B"]'></td>
          </tr>
          <tr>
            <td>B_LP_A</td>
            <td><input ng-model='vals["B_LP_A"]'></td>
          </tr>
          <tr>
            <td>B_CK</td>
            <td><input ng-model='vals["B_CK"]'></td>
          </tr>
          <tr>
            <td>B_ALT</td>
            <td><input ng-model='vals["B_ALT"]'></td>
          </tr>
          <tr>
            <td>B_AP</td>
            <td><input ng-model='vals["B_AP"]'></td>
          </tr>
          <tr>
            <td>B_BILI</td>
            <td><input ng-model='vals["B_BILI"]'></td>
          </tr>
          <tr>
            <td>B_CPTIDE</td>
            <td><input ng-model='vals["B_CPTIDE"]'></td>
          </tr>
          <tr>
            <td>B_FIBG</td>
            <td><input ng-model='vals["B_FIBG"]'></td>
          </tr>
          <tr>
            <td>B_GGT</td>
            <td><input ng-model='vals["B_GGT"]'></td>
          </tr>
          <tr>
            <td>b_fgf21</td>
            <td><input ng-model='vals["b_fgf21"]'></td>
          </tr>
          <tr>
            <td>trend</td>
            <td><input ng-model='vals["trend"]'></td>
          </tr>
          <tr>
            <td>all_sum</td>
            <td><input ng-model='vals["all_sum"]'></td>
          </tr>
        </table>
        <button class="btn" ng-click="submit()">提交</button>
      </div>
    </div>
    <div class="panel panel-default text-center">
      <div class="panel-heading">死亡预测结果</div>
      <div class="panel-body">
        <a>{{res.death}}</a>
      </div>
    </div>
  </div>


  <div class="container theme-rshowcase" ng-show='menuItem == "login"' ng-controller="login">
    <div class="wrapper">
      <form class="form-signin">
        <h2 class="form-signin-heading">Please login</h2>
        <input type="text" class="form-control" name="username" placeholder="User Name" required="" autofocus=""
               ng-model="user_name"/>
        <input type="password" class="form-control" name="password" placeholder="Password" required=""
               ng-model="psw"/>
        <label class="checkbox">
          <input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
        </label>
        <button class="btn btn-lg btn-primary btn-block" ng-click="login()">Login</button>
      </form>
    </div>
  </div>


  <div class="bottom" ng-show='menuItem != "report"'>
    <div class="footer">
      <div class="ml55 pt40 fl" ng-show='menuItem != "report"'><img src="img/logo-2.png"/></div>
      <div class="fl white fs18 lh30 mt30 ml60">
        Contact：deepdr@deepdrdoc.com
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>


</body>
</html>
